<template>
    <B-Page :isTop="true" :topTitle="topTitle" ref="scrollBox">
    	<template slot="button">
    		<Button type="primary" class="goBackBtn" @click="$router.go(-1)">返回文章列表</Button>
    	</template>
    	<template slot="content">
    		<div class="policyDetail">
    			<h3>{{newDetails.detail.name}}</h3>
		    	<p class="tips">
		    		<Tag key="1" name="1">{{newDetails.detail.cate == 2 ? '行业政策' : '最新资讯'}}</Tag>
		    		<span class="selfCreated">发布时间：{{new Date(newDetails.detail.selfCreated).Format("yyyy-MM-dd HH:mm:ss")}}</span>
		    		<span>阅读量：{{newDetails.detail.readingAmount}}</span>
		    	</p>
		    	<div class="detail-cont" v-html="newDetails.detail.content"></div>
		    	<div class="quickLook">
					<div class="prevBox">
						<p class="prev">
							<a href="javacsript: void(0)">
								<span class="noColor">上一篇</span>
								<span v-if="newDetails.prev.length != 0" @click="lintToDetail(newDetails.prev._id, newDetails.detail.user)">{{newDetails.prev.name}}</span>
								<span v-else class="noColor">无</span>
							</a>
						</p>
					</div>
					<div class="nextBox">
						<p class="next">
							<a href="javacsript: void(0)">
								<span v-if="newDetails.next.length != 0" @click="lintToDetail(newDetails.next._id, newDetails.detail.user)">{{newDetails.next.name}}</span>
								<span v-else class="noColor">无</span>
								<span class="noColor">下一篇</span>
							</a>
						</p>
					</div>
				</div>
    		</div>
    	</template>
    </B-Page>
</template>

<script>
    import BPage from 'components/BPage';  //页面框架
    export default {
    	components: { BPage },
    	data() {
    		return {
    			topTitle: ['资讯与政策', '查看详情'],
    			newDetails: {  //文章数据
                    detail: {
                        name: ''
                    },
                    prev: {},  //前一篇
                    next: {}   //后一篇
                },
                id: '',        //当前文章的id
                user_id: ''    //当前操作者的id 
    		}
    	},
    	mounted() {
    		this.init();
    	},
    	methods: {
    		init(obj) {
    			this.$refs.scrollBox.toScrollTop();  //每次刷新页面返回顶部
				if(obj){
                    this.id = obj.id;
                    this.user_id = obj.userId;
                } else {
                    this.id = this.$route.query.id;
                    this.user_id = this.$route.query.userId;
                    this.cate = this.$route.query.cate;
                }
        		this.$ajax(this.$api.policy.detail, {id: this.id, user_id: this.user_id, cate: this.cate}, (res)=>{
        			console.log(res);
                    this.newDetails = res.info;
        		}, (error)=>{
        			console.log(error)
        		})	
        		this.addReadNum();
    		},
    		addReadNum() {  //增加阅读量
        		this.$ajax(this.$api.policy.read,{id: this.id},(data)=>{
        			console.log('增加成功');
        		},(error)=>{
        			console.log(error)
        		})
        	},
    		lintToDetail(id, userId) {  //点击上一篇下一篇查看详情
				this.init({id: id, userId: userId});
			}
    	}
    }
</script>
<style lang="less">
	.goBackBtn {
		width: 120px;
		font-size: 14px;
		line-height: 20px;
	}
	.policyDetail {
		padding: 50px;
		background: #fff;
		h3 {
			min-height: 42px;
			line-height: 42px;
			color: @color-Title;
			font-size: 30px;
			font-family: PingFangSC-Regular;
		}
		.tips {
			padding: 10px 0 20px;
			.selfCreated {
				display: inline-block;
				padding: 0 20px;
			}
			.ivu-tag {
				width: 60px;
				height: 19px;
				padding: 0;
				line-height: 16px;
				text-align: center;
				border-radius: 3px;
				background-color: @color-Sub;
				vertical-align: middle;
				.ivu-tag-text {
					color: #fff;
				}
				&:hover {
					opacity: 1;
					cursor: default;
				}
			}
			span {
				vertical-align: middle;
				color: @color-Sub;
			}
		}
		.detail-cont {
			font-size: 14px;
			text-align: justify;
			img {
				max-width: 100%;
			}
		}
		.quickLook {
			width: 100%;
			padding-top: 50px; 
			font-size: @text-size-14;
			color: @text-color-content;
			overflow: hidden;
			.prevBox {
				width: 50%;
				float: left;
				.noColor {
					padding-right: 15px;
				}
			}
			.nextBox {
				width: 50%;
				float: right;
				text-align: right;
				.noColor {
					padding-left: 15px;
					display: inline-block;
				}
			}
			a {
				color: @color-Primary;
			}
			.noColor {
				color: @color-Content;
			}
		}
	}
</style>
